<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="userId">
<input type="text" id="classId">
<input type="button" value="提交" id="submit">


<!-- 要想构造一个 json 格式的请求, 就不再使用 form 而是使用 ajax 了 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
        let userIdInput = document.querySelector('#userId');
        let classIdInput = document.querySelector('#classId');
        let button = document.querySelector('#submit');
        //首先是获取html中的元素 然后在ajax中转换
        button.onclick = function() {
            $.ajax({
                type: 'post',
                url: 'postJson',
                contentType: 'application/json',
                data: JSON.stringify({
                    //对于post这样的请求 ajax允许使用data属性来构造body部分
                    //此处要构造的内容 其实是一个js对象
                    //需要把js对象 再通过JSON。stringify 从js对象 转成一个字符串
                    //这个字符串的格式就是Json格式
                    userId: userIdInput.value,
                    classId: classIdInput.value
                }),
                success: function(body) {
                    console.log(body);
                }
            });
        }
    </script>



</body>
</html>